<template>
  <div ref="chart" style="height: 100%" />
</template>
<script>
import { Chart } from '@antv/g2';
import { getTicks } from '@/utils/chartScale.js';
export default {
  name: 'JadeChart',
  props: {
    data: { type: Array, required: true },
    color: { type: Array, required: true },
    text: { type: String, required: true },
    showLegend: { type: Boolean, default: false }
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    data() {
      this.updateData();
    }
  },
  mounted() {
    this.initChart();
    this.drawChart();
  },
  methods: {
    getTicks,
    initChart() {
      const ref = this.$refs.chart;
      const ratio = window.ratio || 1;
      this.chart = new Chart({
        container: ref,
        width: ref.clientWidth,
        height: ref.clientHeight,
        appendPadding: [22 * ratio, 0, 0, 0]
      });
    },
    drawChart() {
      const ratio = window.ratio || 1;
      const x = this.x;
      const y = this.y;
      const text = this.text;
      this.chart.data(this.data);

      // 自定义提示组件
      this.chart.tooltip(false); // 关闭 tooltip
      // this.chart.tooltip({
      //   // shared: true,
      //   showMarkers: true,
      //   itemTpl: `
      //               <div style="margin-bottom: 0.625rem;list-style:none;">
      //               <span style="background-color:{color};" class="g2-tooltip-marker"></span>
      //               {name}: {value}
      //               </div>
      //           ` // 自定义 toolTip 样式
      // });

      this.chart.coordinate('theta', {
        innerRadius: 0.5,
        radius: 1,
        maxAngle: 360
      });

      // 图例组件
      this.chart.legend(false);
      if (this.showLegend) {
        this.chart.legend('type', {
          position: 'right',
          itemWidth: 100,
          background: {
            style: {
              // fill: '#11243D',
              lineWidth: 0
            }
          },
          itemName: {
            spacing: 2,
            style: {
              fill: '#fff'
            }
          },
          itemValue: {
            alignRight: true,
            style: {
              fill: '#fff'
            },
            formatter: (text, item, index) => {
              return this.data[index].value;
            }
          },
          marker: {
            style: {
              r: 3.5 * ratio,
              lineWidth: 2 * (window.ratio || 1),
              lineCap: 'butt'
            }
          }
        });
      }
      this.chart
        .interval({
          background: { style: { fill: '#4D5A6D' }}
        })
        .position('type*value')
        .color('type', this.color)
        .size(3)
        .style({
          lineCap: 'round'
        });

      this.chart.annotation().text({
        position: ['50%', '50%'],
        content: text,
        style: {
          fill: '#fff',
          textAlign: 'center',
          fontSize: 10 * (window.ratio || 1)
        }
      });

      this.chart.render(); // 渲染图表
    },

    // 数据更新
    updateData() {
      this.chart.changeData(this.data);
    }
  }
};
</script>
